<template>
  <div>
    <el-drawer
      v-if="visible"
      title="气瓶详情"
      class="cylinderDetail"
      :visible.sync="visible"
      :with-header="false"
      direction="rtl"
      :wrapper-closable="true"
      :append-to-body="true"
      size="75%"
      @close="close"
    >
      <div class="title">
        <div class="title-text">{{ newChipIDS }}</div>
        <el-tag class="tag">{{
          /*   formatColumnMap(orderStatusMap, "value", cylinderInfo.orderStatus, "desc")*/ "共享瓶"
        }}</el-tag>
      </div>
      <section>
        <div class="client-box">
          <div class="title">气瓶信息</div>
          <div class="client-table">
            <div class="table-one-row">
              <div class="client-name">气瓶芯片号</div>
              <div class="client-value">{{ newChipIDS }}</div>
              <div class="client-name">最后充装时间</div>
              <div class="client-value">{{ cylinderInfo.czsj }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">所属企业</div>
              <div class="client-value">{{ cylinderInfo.officecode }}</div>
              <div class="client-name">建档时间</div>
              <div class="client-value">{{ cylinderInfo.jdsj }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">气瓶规格</div>
              <div class="client-value">{{ cylinderInfo.typeName }}</div>
              <div class="client-name">充装次数</div>
              <div class="client-value">{{ cylinderInfo.czcs }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">皮重</div>
              <div class="client-value">{{ cylinderInfo.pz }}</div>
              <div class="client-name">使用年限</div>
              <div class="client-value">{{ cylinderInfo.synx }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">强检周期</div>
              <div class="client-value">{{ cylinderInfo.qjzq }}</div>
              <div class="client-name">气瓶状态</div>
              <div class="client-value">{{ cylinderInfo.chipStatusName }}</div>
            </div>
            <div class="table-one-row">
              <div class="client-name">最后配送员</div>
              <div class="client-value">{{ cylinderInfo.lastOwnerName }}</div>
              <div class="client-name">最后配送订单</div>
              <div class="client-value">{{ cylinderInfo.lastOrderCode }}</div>
            </div>
          </div>
        </div>
        <div class="client-box circulation">
          <header>
            <div class="title">
              历史流转 <span style="color: #aaa;">(展示最近10条记录)</span>
            </div>
            <el-switch
              v-model="recordSwitch"
              style="display: block;"
              active-color="#38bdbd"
              inactive-color="#126edc"
              active-text="地图模式"
              inactive-text="流转模式"
              @change="modelChange"
            />
          </header>

          <div v-if="recordSwitch" class="map-content">
            <Track ref="track" :cylinder-info="cylinderInfo" :city="city" />
          </div>
          <div v-else class="record">
            <div v-for="(item,index) in cylinderInfo.circList" :key="index" class="re-content">
              <img v-if="item.operateType===1 || item.operateType===7" class="car-icon" src="@/assets/kprk.png" alt="">
              <img v-if="item.operateType===6" class="car-icon" src="@/assets/yhqs.png" alt="">
              <img v-if="item.operateType===3 || item.operateType===5" class="car-icon" src="@/assets/zpck.png" alt="">
              <img v-if="item.operateType===4" class="car-icon" src="@/assets/zprk.png" alt="">
              <img v-if="item.operateType===4" class="car-icon" src="@/assets/gpdd.png" alt="">
              <img v-if="item.operateType===2" class="car-icon" src="@/assets/cz.png" alt="">
              <img v-if="item.operateType===8" class="car-icon bg-color" src="@/assets/init.png" alt="">
              <img v-if="item.operateType===10" class="car-icon" src="@/assets/thrk.png" alt="">
              <img v-if="item.operateType===11" class="car-icon" src="@/assets/thck.png" alt="">
              <img v-if="item.operateType===12" class="car-icon" src="@/assets/tpxdrk.png" alt="">
              <img v-if="item.operateType===13" class="car-icon" src="@/assets/bottleback.png" alt="">
              <span class="circle-icon" />
              <p class="time">{{ item.operateTimeStr }}</p>
              <div class="re-item">
                <p>{{ item.operateTypeName }}</p>
                <p v-if="item.operateType===1 || item.operateType===3||item.operateType===4 || item.operateType===9"><span>操作人:</span><span>{{ item.auditor }}</span></p>
                <p v-else><span>操作人:</span><span>{{ item.ownerName }}</span></p>
                <p
                  v-if="item.operateType===1 ||
                    item.operateType===3||
                    item.operateType===4 ||
                    item.operateType===9"
                ><span>出入库单号:</span><span>{{ item.billCode }}</span></p>
                <p v-if="item.operateType===12"><span>押金单号:</span><span>{{ item.orderCode }}</span></p>
                <p v-else><span>订单:</span><span>{{ item.orderCode }}</span></p>
                <p v-if="item.operateType===4"><span>入库单:</span><span>{{ item.billCode }}</span></p>
                <p v-if="item.operateType===5"><span>出库单:</span><span>{{ item.billCode }}</span></p>
                <p v-if="item.operateType===10 ||item.operateType===11"><span>退货单号:</span><span>{{ item.billCode }}</span></p>

                <p><span>发生场站:</span><span>{{ item.orgName }}</span></p>
                <p v-if="!(item.operateType===1 || item.operateType===3||item.operateType===4 || item.operateType===9)">
                  <img
                    v-if="item.address"
                    src="@/assets/map_images/location.png"
                    alt=""
                  ><span>{{ item.address }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </el-drawer>
  </div>
</template>

<script>
  import { bottleCirc } from '@/api'
  import Track from './track'
  export default {
    name: 'cylinder-detail',
    components: {
      Track
    },
    data() {
      return {
        detail: {},
        visible: false,
        recordSwitch: false,
        newChipIDS: '',
        newGPBMIDS: '',
        cylinderInfo: {}
      }
    },
    methods: {
      async open(temp, code) {
        return new Promise(async resolve => {
          if (temp) {
            this.resolve = resolve
            this.visible = true
            this.newChipIDS = temp
            this.newGPBMIDS = code
            this.getDetail()
            const companyInfo = JSON.parse(sessionStorage.getItem('companyInfo'))
            console.log('companyInfo', companyInfo)
            if (companyInfo) {
              this.city = companyInfo.city || '北京'
            }
          }
        })
      },
      modelChange() {
        console.log(this.recordSwitch)
      },
      async getDetail() {
        const res = await bottleCirc({ bottleNum: this.newChipIDS })
        if (res && res.data) {
          this.cylinderInfo = res.data
        }
        console.log(this.cylinderInfo)
      },
      close() {
        this.detail = {}
        this.visible = false
        this.recordSwitch = false
        this.newChipIDS = ''
        this.newGPBMIDS = ''
        this.cylinderInfo = {}
      }
    }
  }
</script>

<style lang="scss" scoped>
.cylinderDetail {
  .title {
    display: flex;
    padding: 20px 20px 0 20px;
    // margin-bottom: 20px;
    .title-text {
      line-height: 25px;
    }
    .tag {
      margin: 0 10px;
    }
  }
  section {
    height: calc(100% - 65px);
    padding: 0 20px;
    .client-box {
      margin-top: 20px;
      font-size: 14px;
      .title {
        margin-bottom: 10px;
        font-weight: 600;
        color: #38bdbd;
      }
      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .title {
          padding: 0;
          font-weight: 600;
          color: #38bdbd;
        }
      }

      .client-table {
        border: 1px solid #e3e3e3;
        .table-one-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            width: 32%;
            padding: 10px 0;
            text-align: left;
          }
        }
        .table-two-row {
          border-bottom: 1px solid #e3e3e3;
          div {
            display: inline-block;
          }
          .client-name {
            width: 16%;
            padding: 10px 0;
            text-align: center;
            background-color: #f1f1f1;
          }
          .client-value {
            padding: 10px 0;
            text-align: left;
            flex: 1;
          }
        }
        .table-two-row:last-child {
          border-bottom: none;
        }
      }

      .record {
        display: flex;
        padding-top: 70px;
        overflow-x: auto;
        .re-content {
          position: relative;
          width: 200px;
          min-width: 200px;
          padding: 10px;
          border-top: 1px solid #cdcdcd;

          .car-icon {
            position: absolute;
            top: -56px;
            right: 0;
            left: 0;
            display: block;
            width: 40px;
            height: auto;
            margin: 0 auto;
          }
          .bg-color {
            padding: 6px;
            background-color: #3199A0;
            border-radius: 100%;
          }
          .circle-icon {
            position: absolute;
            top: -8px;
            right: 0;
            left: 0;
            display: block;
            width: 15px;
            height: 15px;
            margin: 0 auto;
            cursor: pointer;
            background-color: #d7d7d7;
            border-radius: 50%;
          }
          .re-item {
            padding: 10px;
            background-color: #f2f2f2;
            border-radius: 4px;
            img {
              display: block;
              width: 20px;
              height: 20px;
              margin-right: 4px;
              cursor: pointer;
            }
            p {
              display: flex;
              justify-content: flex-start;
              font-size: 12px;
              line-height: 24px;
              span {
                display: block;
              }
              span:nth-child(1) {
                min-width: 55px;
              }
              span:nth-child(2) {
                max-width: 104px;
                word-break: break-all;
              }
            }
            p:nth-child(1) {
              justify-content: center;
              margin-bottom: 4px;
              font-size: 14px;
            }
            p:nth-last-child(1) {
              font-size: 12px;
              span {
                max-width: 100% !important;
              }
            }
          }
        }
      }
    }
    .circulation {
      height: calc(100% - 45px - 270px - 30px);
      .map-content {
        height: 100%;
        min-height: 500px;
      }
    }
  }
}

.time {
  margin: 10px 0;
  color: #999;
  text-align: center;
}
</style>
